<script setup lang="ts">
import { useOverviewStore } from '~/stores/request'
const visible = ref(false)
import { useSystemStore } from '~/stores/system'
const route = useRoute()
const router = useRouter()
const syStore = useSystemStore()
const overviewStore = useOverviewStore()
const { theme, setTheme } = useTheme()
const themeChange = () => {
  if (theme.value === 'dark') {
    setTheme('light')
  } else {
    setTheme('dark')
  }
}
const go = () => {
  syStore.setSelectedTable('')
  router.push(`/`)
}

const createTable = () => {
  visible.value = true
}

const handleCommit = () => {
  visible.value = false
  setTimeout(() => {
    overviewStore.state?.refresh()
  }, 0)
}
</script>

<template>
  <EditDialog 
    v-model:visible="visible" 
    :title="$t('create_table')"
    :createable="true"
    @commit="handleCommit"
  />
  <div class="app-header flex justify-between items-center">
    <div class="left flex items-center">
      <SVGIcon class="mr-2" type="logo" @click="go" />
      <div @click="go" class="title mr-2">{{ $t('data_center') }}</div>
      <Button :fill="true">
        {{ route.params.table || $t('home') }}
      </Button>
    </div>
    <div class="right flex items-center">
      <Button icon="plus" @click="createTable">
        {{ $t('create_table') }}
      </Button>
      <Language />
      <Theme :theme="theme" @change="themeChange" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.app-header {
  height: var(--header-height);
  padding: 0 var(--main-space);
}

.app-header * {
  cursor: pointer;
}

.app-header *::selection {
  background-color: transparent;
}

.right {
  gap: 10px;
}
</style>
